<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body style="padding:20px;">

<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>

<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" data-backdrop="static">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 1.框的标题 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">友情提示</h4>
            </div>
            <!-- 2.框内信息 -->
            <div class="modal-body">
                服务器错误，请稍后再试！
                <hr>
                <img src="img/1.jpg" width="200px">
                <hr>
                <input type="text">
            </div>
            <!-- 3.框的按钮 -->
            <div class="modal-footer">
                <button class="btn btn-info">确定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<script src="/jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>